<template>
	<div class="layout">
		<Layout style="overflow: hidden;height: 100vh;">
			<Header style="background: #fff;border-bottom: 1px solid #d7dde4;">
				<div class="layout-logo">前端模拟测试</div>
			</Header>
			<Layout style="height: calc(100vh - 64px);">
				<Sider :style="{background: '#fff'}" hide-trigger>
					<Menu :active-name="routerName" :open-names="['1']" theme="light" width="auto">
						<Submenu name="1">
							<template slot="title">
								<Icon type="ios-navigate"></Icon>
								示例
							</template>
							<MenuItem v-for="item in routerDemoList" :key="item.name" :name="item.name" :to="item.path">
								{{ item.meta.title }}
							</MenuItem>
						</Submenu>
						<Submenu name="2">
							<template slot="title">
								<Icon type="ios-navigate"></Icon>
								测试
							</template>
							<MenuItem v-for="item in routerList" :key="item.name" :name="item.name" :to="item.path">
								{{ item.meta.title }}
							</MenuItem>
						</Submenu>
					</Menu>
				</Sider>
				<Layout :style="{padding: '10px',overflow: 'auto'}">
					<Content :style="{background: '#fff'}">
						<router-view/>
					</Content>
				</Layout>
			</Layout>
		</Layout>
	</div>
</template>
<script>
import {routerDemoList, routerList} from "@/router/router";

export default {
	// eslint-disable-next-line vue/multi-word-component-names
	name: 'mains',
	data() {
		return {
			routerList,
			routerDemoList
		}
	},
	computed: {
		routerName() {
			return this.$route.name
		}
	},
	methods: {},
	mounted() {
		console.log(this.routerList)
	}
}
</script>
<style scoped>
.layout {
	border: 1px solid #d7dde4;
	background: #f5f7f9;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.layout-logo {
	height: 30px;
	border-radius: 3px;
	float: left;
	position: relative;
	top: 15px;
	left: 20px;
	line-height: 30px;
	font-size: 20px;
	font-weight: bold;
}

.layout-nav {
	width: 420px;
	margin: 0 auto;
	margin-right: 20px;
}
</style>